<template>
	<div class="personal">
		<div class="head">
			<div class="headImg"><img :src="photo"  alt=""></div>
			<div class="mesage">
				<h1>{{name}}</h1>
				<div><span>已登录服务: </span>{{isNaN(interval)?1:interval}}天</div>
				<div> <span>上次登录:</span>{{lastTime}}</div>
			</div>
			<div class="others">
				<!--<el-button @click="switchUser()">切换账号</el-button>-->
			</div>
		</div>
		<div class="fileup">
			<label >
				<input type="file" name="f" 
			    accept="image/png, image/jpeg, image/gif, image/jpg"
			    @change="filechange($event)">
				<div class="addfile">上传头像</div>
			</label>
		</div>
		<div class="body">
			<div class="items">
				<div class="item">
					<router-link to="/personal/modifyinfo">修改资料</router-link>
				</div>
				<div class="item">
					<router-link to="/personal/mycollection">我的收藏</router-link>
				</div>
				<div class="item">
					<router-link to="/personal/warningsetting">预警记录</router-link>
				</div>
				<div class="item">
					<router-link to="/personal/loginlog">登录日志</router-link>
				</div>
			</div>
			<router-view class=""></router-view>
		</div>
	</div>
</template>
<script>
import moment from 'moment'
	export default{
		name:'personal',
		data(){
			return{
				info:[],
				headUrl:'./img/avatar.png',
				interval:'',
				lastTime:''

			}
		},
		computed:{
			name:function(){
				return this.$store.state.personal.name
			},
			photo:function(){
				return this.$store.state.personal.photo
			},
			createTime:function(){
				return this.$store.state.personal.createTime
			}
		},
		mounted(){
			this.loginTime()
		},
		methods:{
			loginTime(){
				let firsttime = localStorage.firstTime
				let newTime = localStorage.times
				let f = new Date(localStorage.firstTime)
				let n = new Date(localStorage.times)
				let interval = moment(f).from(n)
				this.interval = moment().diff(this.createTime, 'd')
				let lastTime = localStorage.lastTime
				let l =new Date(localStorage.lastTime)
				this.lastTime = moment(l).format('YYYY-MM-DD')
			},
			switchUser(){
				this.$http.post('/vrv-monitor-platform-web/logout')
				this.$router.push('/login');
			},
			filechange(e){
				let file = e.target.files[0]
				let fr = new FileReader()
				if(file.size>60*1024){
					this.$message.error("图片大于60k了")
					return
				}
				fr.onload = fe => {
					this.headUrl = fr.result
					this.$store.commit('updatePhoto',{
						photo:fr.result
					})
				    this.$http.post('vrv-monitor-platform-web/user/update/avatar',{
				    	photo:this.headUrl
				    }).then(res=>{
							
				    })
				}
				fr.readAsDataURL(file)
			}
		}
	}
</script>
<style scoped>
.personal{
	background-color: #fff;
	min-height: 100%;
	margin-right: 1.3rem;
}

.head{
	display: flex;
	padding:1.88rem;
	padding-bottom: 0.625rem;
}
.fileup{
	padding-left: 1.88rem;
	margin-bottom: 1.4rem;
}
.fileup label{
	display: inline-block
}
.fileup .addfile{
	width: 5rem;
	height: 2.1rem;
	border: 1px solid #bfcbd9;
	text-align: center;
	line-height: 2.1rem;
	border-radius:4px;
	font-size: 14px;
	box-sizing:border-box;
}
.fileup .addfile:hover{
	color: #20a0ff;
	border-color:#20a0ff;
	cursor: pointer;
}
input[type='file']{
	display: none;
}
.head .headImg{
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	text-align: center;
	border: 1px solid #dcdcdc;
	overflow: hidden;
}
.head .headImg img{
	width: 100%;
	height: 100%;
	border-radius:50%;
}
.head .mesage{
	flex:1;
	padding-left: 1.2rem;
}
.head .mesage h1{
	margin: 0.6rem 0 0.3rem 0;
	font-size: 0.88rem;
	color: #333;
}
.head .mesage div{
	font-size: 0.88rem;
	color: #ec6941;
	margin-bottom: 3px;
}
.head .mesage div span{
	display: inline-block;
	width: 6rem;
	color: #999;
}
 .items{
	border-bottom: 1px solid #dcdcdc;
	padding-left: 1.8rem;
	font-size: 0;
}
.item{
	width: 7.5rem;
	height: 2.5rem;
	margin-right: 0.5rem;
	border-radius: 5px 5px 0 0;
	display: inline-block;
	font-size: 1rem;
	text-align: center;
	line-height: 2.5rem;
	background: #eee;
}
.item a{
	display: block;
	height: 100%;
	text-decoration: none;
	color: #555;
	font-size: 0.88rem;
}
.router-link-active{
	background:#fff;
	color: #ec6941 !important;
	border: 1px solid #dcdcdc;
	border-bottom: 1px solid #fff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 1.75rem;
    color: #8c939d;
    width: 11.1rem;
    height: 11.1rem;
    line-height: 11.1rem;
    text-align: center;
  }
  .avatar {
    width: 11.1rem;
    height: 11.1rem;
    display: block;
  }
</style>